<template>
    <el-popover class="format-tip" width="500" trigger="hover" placement="left">
        <el-table :data="list">
            <el-table-column width="100" property="format" label="格式"></el-table-column>
            <el-table-column width="150" property="eg" label="例子"></el-table-column>
            <el-table-column width="250" property="desc" label="描述"></el-table-column>
        </el-table>
          </el-popover>
</template>

<script type="text/ecmascript-6">
  /**
   * @author 白雨浓
   * @date 2019/7/13 13:42
   *
   * 时间格式化 提示
   **/
  export default {
    name: 'FormatTip',
    data() {
      return {
        list: [
          {format: 'YY', eg: '18', desc: '两位数的年份'},
          {format: 'YYYY', eg: '2018', desc: '四位数的年份'},
          {format: 'M', eg: '1-12', desc: '月份，从 1 开始'},
          {format: 'MM', eg: '01-12', desc: '月份，两位数'},
          {format: 'MMM', eg: 'Jan-Dec', desc: '简写的月份名称'},
          {format: 'MMMM', eg: 'January-December', desc: '完整的月份名称'},
          {format: 'D', eg: '1-31', desc: '月份里的一天'},
          {format: 'DD', eg: '01-31', desc: '月份里的一天，两位数'},
          {format: 'H', eg: '0-23', desc: '小时'},
          {format: 'HH', eg: '00-23', desc: '小时，两位数'},
          {format: 'h', eg: '1-12', desc: '小时, 12 小时制'},
          {format: 'hh', eg: '01-12', desc: 'Hours, 12 小时制, 两位数'},
          {format: 'm', eg: '0-59', desc: '分钟'},
          {format: 'mm', eg: '00-59', desc: '分钟，两位数'},
          {format: 's', eg: '0-59', desc: '秒'},
          {format: 'ss', eg: '00-59', desc: '秒 两位数'},
          {format: 'S', eg: '0-9', desc: '毫秒 一位数'},
          {format: 'SS', eg: '00-99', desc: '毫秒 两位数'},
          {format: 'SSS', eg: '000-999', desc: '毫秒 三位数'},
          {format: 'Z', eg: '+5:00', desc: 'UTC 的偏移量'},
          {format: 'ZZ', eg: '+0500', desc: 'UTC 的偏移量，数字前面加上 0'},
          {format: 'A', eg: 'AM PM', desc: 'undefined'},
          {format: 'a', eg: 'am pm', desc: 'undefined'},
          {format: 'Do', eg: '1st... 31st', desc: '带序号的月份'},
        ]
      }
    },
    mounted() {
      this.$nextTick(() => {

      })
    },
    methods: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .format-tip {
    }
</style>
